<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>长度单位</h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank"
                href="https://blog.csdn.net/aiolos1111/article/details/51967744">深入理解移动端像素知识与Viewport知识</a></li>
        <li><a target="_blank"
                href="https://developer.android.com/training/multiscreen/screendensities?hl=zh-cn">支持不同的像素密度</a></li>
    </ul>

    <h2>摘要</h2>

    <h3>物理像素</h3>
    <p>物理像素又称为设备像素，对应的就是屏幕分辨率，手机分辨率，属于硬件级别的，单位为px。</p>

    <h3>设备独立像素</h3>
    <p>
        Web端又称为CSS像素（px），Android端又称为虚拟像素（dp）, iOS端中又称为逻辑像素（pt）， 它是一个相对单位，在不同的设备中，1个设备独立像素可能等于多个物理像素。
    </p>

    <h3>像素密度</h3>
    <p>像素密度（ppi），所表示的是每英寸所拥有的像素数量。 </p>
    
    <p>Android端、iOS端又可称为dpi。</p>

    <p>ppi = √（屏幕宽^2+屏幕高^2) / 屏幕尺寸</p>
    <h4>示例</h4>
    <p><strong>华为P30</strong></p>
    <p>6.1英寸、2340×1080像素</p>
    <p>ppi = √（2340^2 + 1080^2） / 6.1 = 422 ppi</p>

    <p><strong>iPhone 11</strong></p>
    <p>6.1英寸、1792×828像素</p>
    <p>ppi = √（1792^2 + 828^2） / 6.1 = 323 ppi</p>


    <h3>设备像素比</h3>
    <p>设备像素比(Device Pixel Ratio）, 简称DPR</p>
    <p>在Android端、iOS端又称为Scale Factor(缩放因子)</p>
    <p>设备像素比的存在意义，是方便开发者进行资源分类、设计者进行UI设计，并非实际的效果，这就是实际效果存在偏差的原因。</p>

    <h4>Android设备</h4>
    <p>缩放因子 = ppi / 160 </p>
    <p>Android的缩放因子，分别为0.75x, 1x, 1.5x, 2x, 3x, 4x。</p>

    <img src="./img/devices-density_2x.png" width="100%">

    <ul>
        <li><strong>ldpi</strong> 适用于低密度 (ldpi) 屏幕 (~ 120dpi) 的资源。</li>
        <li><strong>mdpi</strong> 适用于中密度 (mdpi) 屏幕 (~ 160dpi) 的资源（这是基准密度）。</li>
        <li><strong>hdpi</strong> 适用于高密度 (hdpi) 屏幕 (~ 240dpi) 的资源。</li>
        <li><strong>xhdpi</strong> 适用于加高 (xhdpi) 密度屏幕 (~ 320dpi) 的资源。</li>
        <li><strong>xxhdpi</strong> 适用于超超高密度 (xxhdpi) 屏幕 (~ 480dpi) 的资源。</li>
        <li><strong>xxxhdpi</strong> 适用于超超超高密度 (xxxhdpi) 屏幕 (~ 640dpi) 的资源。</li>
    </ul>


    <h4>iOS设备</h4>
    <p>缩放因子 = ppi / 160 </p>
    <p>iOS的缩放因子，分别为@1x, @2x, @3x。</p>


    <h4>设备像素比、设备独立像素、物理像素的关系</h4>
    <p>设备像素比，决定了设备独立像素与物理像素的比例。</p>
    <p>设备独立像素 = 物理像素 * 设备像素比^2</p>

</body>

</html>